<template>
    <div v-if="route.name == 'DynamicCom'">
        第一个组件
    </div>
    <div v-if="route.name == 'conveyor'" class="conveyor">
        <div style="display: flex;flex-wrap: wrap;flex-direction: column;justify-content: flex-end;height: 100%;">
            <div>
                <hr>
            </div>
            <div style="text-align: right;">
                <button @click="disShow">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter, } from 'vue-router'
const route = useRoute()
const router = useRouter()

// 自定义一个事件名 通过emit传递给父组件， 写在标签上
const emits = defineEmits(['on_show'])
const disShow = ()=>{
  emits('on_show',false)
}
// console.log(route);
// console.log(router);

</script>


<style>
.conveyor {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: beige;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
</style>